// JavaScript Document
//SlidesImages es un componente que muestra dentro de un modal box una serie de imaagenes
//las imagenes de tama�o real tienen que ser de una resoluci�n de 640x480
//los thumbnails tienen que ser de una resoluci�n de 100x100, ademas en el name deben deter la direcci�n de la 
//imagen en tama�o real
//los thumbnails deben contener la siguiente información
// src: la direccion del thumbnail, title: la descripcion de la imagen,name: la direccion de la imagen en tamaño real



//contenedor de todo el componente
var nbox;
var box;
//contenerdor de la imagen a tama�o real
var nbigimage;
var bigimage;
var bigimageimg;
//contenedor de los thumbnails
var nslides;
var slides;
var slidesimg;
//cantidad de thumbnails que se muestran
var nthumbnails;


//contenedor de los controles
var ncontrol;
var control;

//direccion donde se almacenan las imagenes del control
var urlimgs;

function SlidesImages()
{
	slides=$("#"+nslides);
	slidesimg=$("#"+nslides+" img");
	bigimage=$("#"+nbigimage);
	control=$("#"+ncontrol);
	
	
	//si es mayor que muestra los thumbnails
	if(slidesimg.length>1){
		for(n=0;n<slidesimg.length;n++)
		{
			//oculta los thumbnails que sobrepasan el limite
			if(n>=nthumbnails)
			{
				slidesimg.eq(n).hide();
			}
			//agrega una accion las imagens
			//slidesimg.eq(n).attr("onclick","showimage(\""+slidesimg.eq(n).attr("name")+"\",\""+slidesimg.eq(n).attr("title")+"\")")
		}
	}
	// de lo contrario solo muestra la imagen tama�o real
	else
	{
		slidesimg.eq(0).hide();
		control.hide();
		
	}
	if(slidesimg.length<nthumbnails){
		nthumbnails=slidesimg.length;
	}

		showimage(slidesimg.eq(0).attr("name"),slidesimg.eq(0).attr("title"));
		showControl();
		

}

//muestra las images tama�o real
function showimage(name,title)
{
	
	bigimage.fadeTo("slow",0);
	
	setTimeout("showimageh(\""+name+"\",\""+title+"\")", 500);
	
}

function showimageh(name, title)
{
	bigimage.html("<img src=\""+name+"\">");
	bigimage.prepend("<div id=\"title\">"+title+"</div>");
	$("#title").fadeTo('fast',0.5);
	bigimage.fadeTo('slow',1)
}

//****************************************
//asigna las funcionalidades a los controles del slide show
function showControl()
{

	$("#backplayer").hover(
		function(){
			$(this).attr("src","../imagenes/back2.gif");
			
		}
		,function(){
			$(this).attr("src","../imagenes/back1.gif");
		}
	);
	
	$("#nextplayer").hover(
		function(){
			$(this).attr("src","../imagenes/next2.gif");	
			
		}
		,function(){
			$(this).attr("src","../imagenes/next1.gif");
		}
	);
	
	$("#play").hover(
		function(){
			$(this).attr("src","../imagenes/play2.gif");
		}
		,function(){
			$(this).attr("src","../imagenes/play1.gif");
		}
	);
	$("#stop").hover(
		function(){
			$(this).attr("src","../imagenes/stop2.gif");
		}
		,function(){
			$(this).attr("src","../imagenes/stop1.gif");
		}
	);
	$("#stop").hide();
	
	
}
//***********************************************************/
//esta funcion desplaza la primera imagen y la ubica al final de la lista

function Backplay()
{
	//optiene la información releventa de la imagen que se va a desplazar
	imgs=$("#"+nslides+" img");
   var  img=imgs.eq(imgs.length-1);
   var  src=img.attr("src");
   var  name=img.attr("name");
   var  title=img.attr("title");	
    img.remove();
   
   
   //agrega la imagen que estaba ubicada el el primer lugar al final de la lista
   var thumbails=$("#"+nslides);
    thumbails.prepend("<img src=\""+src+"\"  name=\""+name+"\" onClick='showimage(\""+name+"\",\""+title+"\")'/>");
    imgs=$("#"+nslides+" img");
	
    img=imgs.eq(0);
    img.hide();
	img=imgs.eq(nthumbnails);
    img.hide("slow");
   
	//crea un retraso para mostra la siguiente imagens
	//estos es simplemente para hacer un efecto visual
     setTimeout("BackPlayh()", 100);
   
   
}
//mustra la nueva imagen
function BackPlayh()
{
	img=imgs.eq(0);
    img.show("slow");
	
}

function deleteback()
{
		
}
var imgs;
//desplaza la imagen que se encuntra al final de la lita al primer lugar.
function Nextplay()
{
	//obtiene la informaciín de la imagen 
	imgs=$("#"+nslides+" img");
  	var img=imgs.eq(0);
    img.hide("slow");
    img=imgs.eq(nthumbnails);
    img.show("slow");
    setTimeout("deletenext()", 500);

}
//eliminila la imagen al final de la lista y la ubica al inicio
function deletenext()
{
    var  img=imgs.eq(0);
    var src=img.attr("src");
    var name=img.attr("name");
    var title=img.attr("title");
    img.remove();
   
	var thumbails=$("#"+nslides);
    thumbails.append("<img src=\""+src+"\"  name=\""+name+"\" title=\""+title+"\"onClick='showimage(\""+name+"\",\""+title+"\")'/>");
    imgs=thumbails=$("#"+nslides+" img");
	if(imgs.length>nthumbnails){
	    img=imgs.eq(imgs.length-1);
    	img.hide();   
	}
   
}
var stop_play=false;
//inicia la funcion pra que las imagenes se dezplacen de forma automatica
function Play()
{
	stop_play=false;
	turnimages();
}
//detienen la reproducción automatica
function StopPlay()
{
	stop_play=true;	
	$("#stop").hide();
	$("#play").show();
}
//cicli de las imagenes en movimiento
function turnimages()
{
	if(!stop_play){
			
			$("#play").hide();
			$("#stop").show();
			setTimeout("turnimages()", 5000);
			change();
		}
}
//cambia las imagens de posición que se encuentran en movimiento
function change()
{
	imgs=$("#"+nslides+" img");
    var img=imgs.eq(1);
	var name=img.attr("name");
    var title=img.attr("title");
	showimage(name,title);
	Nextplay();
}



// JavaScript Document
function ModalBox() {	

	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
		//Get the A tag
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("fast",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(2000); 
		$("#banner").hide();
	}	);
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		
   			$(this).hide();
		    $('.window').hide();
		
	});		
	

	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
		 StopPlay();
		 $("#banner").show();
	});	
	
 $(document).keyup(function(e) {  
   if(e.keyCode == 27) {  
     $('#mask').hide();  
     $('.window').hide();  
	 StopPlay();
	 $("#banner").show();
   }  
 });

	
};
